{% extends 'base.html' %}

{% block title %}
All Categories · {{ super() }}
{% endblock title %}

{% block head_description %}
All categories of the {{ SITENAME|striptags|e }} blog.
{% endblock head_description %}

{% block meta_tags_in_head %}
{{ super() }}
{% from '_includes/_defaults.html' import FEATURED_IMAGE, CATEGORIES_URL with context %}
<meta property="og:title" content="All Categories · {{ SITENAME|striptags|e }}"/>
<meta name="twitter:title" content="All Categories · {{ SITENAME|striptags|e }}">
<meta property="og:url" content="{{ SITEURL }}/{{ CATEGORIES_URL }}" />
<meta property="og:description" content="All categories of the {{ SITENAME|striptags|e }} blog" />
<meta name="twitter:description" content="All categories of the {{ SITENAME|striptags|e }} blog">
<meta property="og:site_name" content="{{ SITENAME|striptags|e }}" />
<meta property="og:article:author" content="{{ AUTHOR }}" />
{% if FEATURED_IMAGE %}
<meta property="og:image" content="{{ FEATURED_IMAGE }}" />
<meta name="twitter:image" content="{{ FEATURED_IMAGE }}" >
{% endif %}
{% endblock meta_tags_in_head %}

{% block feed_links %}
{{ super() }}
{% include '_includes/feeds_categories.html' %}
{% endblock feed_links %}

{% block content %}
{% from '_includes/_defaults.html' import CATEGORIES_URL with context %}
<div class="row-fluid">
    <header class="page-header span10 offset2">
    <h1><a href="{{ SITEURL }}/{{ CATEGORIES_URL }}">All Categories</a></h1>
    </header>
</div>


<div class="row-fluid">
    <div class="span8 offset2">
        <div class="accordion" id="accordion2">
            {% for category, articles in categories %}
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle category-title-inside-accordion collapsed" data-toggle="collapse" data-parent="#accordion2" href="#{{ category.slug }}-ref">
                        {% set num = articles|count %}
                        {{ category }}<span class="superscript">{{ num }}</span>
                    </a>
                </div>
                <div id="{{ category.slug }}-ref" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <ul class="list-articles-under-tag-category">
                            {% for article in articles %}
                            <li itemscope>
                                    <a href="{{ SITEURL }}/{{ article.url }}">
                                        {{ article.title }}
                                        {% if article.subtitle %}
                                        <small class="subtitle">
                                            {{ article.subtitle }}
                                        </small>
                                        {% endif %}
                                    </a>
                                <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">
                                    {{ article.locale_date }}
                                </time>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock content %}
{% block script %}
{{ super() }}
<script>
    function uncollapse() {
            $(window.location.hash).collapse({
                toggle: true
            })
    }
</script>

<script>
    uncollapse();
</script>
{% endblock script %}
